import { FC } from 'react';
import Link from 'next/link';
import { IProductCard } from '@/components/shared/ProductCard/types';
import { Title } from '@/components/shared/Title';
import ButtonProject from '@/components/ui/ButtonProject/ButtonProject';
import { Plus } from 'lucide-react';

const ProductCard:FC<IProductCard> = ({
  id,
  name,
  price,
  imageUrl,
  description,
  className,
}) => {


  return (
    <div>
      <Link href={`/product/${id}`}>
        {/*flex justify-center p-6 bg-secondary rounded-lg h-[260px]*/}
        <div>
          {/* w-[215px] h-[215px]" */}
          <img src="https://via.placeholder.com/200x200" alt={name}/>
        </div>

        <Title text={name} size="sm" />

        <p>
          description
        </p>

        <div>
          <span>
            от <b>{price} ₽</b>
          </span>

          <Plus size={20} />
          <ButtonProject
            title={'добавить'}
            size={'small'}
          />

        </div>

      </Link>
    </div>
  );
};

export default ProductCard;
